<script setup>
import ConfigMinxins from "../ConfigMinxins";
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  ...ConfigMinxins.props,
})

const emit = defineEmits(['update:modelValue'])
const colors = ['primary', 'success', 'warning', 'error', 'info']

</script>

<template>
  <el-form-item label="文字内容">
    <el-input v-model="props.modelValue.content" placeholder="请设置字段名称"/>
  </el-form-item>
  <el-form-item label="主题色">
    <div class="w-alert-text-option">
      <div v-for="(color,index) in colors" @click="props.modelValue.type = color" :key="index"
           :style="`background-color: var(--el-color-${color})`">
        <el-icon v-if="color === props.modelValue.type"><Select /></el-icon>
      </div>
    </div>
  </el-form-item>
  <el-form-item label="隐藏图标">
    <el-switch v-model="props.modelValue.hideIcon"/>
  </el-form-item>

</template>

<style lang="less" scoped>
.w-alert-text-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  &> div {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 10px;
    color: white;
    cursor: pointer;
  }
}
</style>
